<template>
  <div class="container">
    <category title="美食" :listData="foods">
    <img src="https://img1.baidu.com/it/u=2904943647,2488029501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=318" alt="">
    </category>
    <category title="游戏" :games="games">
    <ul>
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
    </ul>
    </category>
    <category title="电影" :filme="filme">
    <ul>
        <li v-for="(item,index) in filme" :key="index">{{item}}</li>
    </ul>
    </category>
  </div>
</template>

<script>
import Category from './components/Category.vue'
export default {
  name:'App',
  components:{Category},
  data() {
    return {
      foods:['火锅','烧烤','小龙虾','牛排'],
      games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      filme:['《教父》','《拆弹专家》','《您好，李焕英》','《尚硅谷》']
    }
  },
}
</script>

<style>
.container{
  display: flex;
  justify-content: space-around;
}
</style>